<template>
     <layout title="材料类型管理"  showNew   @newBtnEvt="toEditPage">
                <ul   class = 'list-box'  >
                    <li  v-for="item in  list"   :key = 'item.id'>
                       <span>{{ item.name }}<em>{{ item.remark }}</em></span>
                       <i> &#xe6cb; </i> 
                    </li>
                </ul>
       </layout>
</template>

<script>

import { materialListApi } from '../../apis/materialApi'
      export  default{


        data(){
            return {
           
              list:[]

            }
        },

        async created(){

             let  result = await   materialListApi ()
             

            if (result.code === 200){
                this.list = result.data.rows
            }

        },

        methods:{
            toEditPage(){
                this.$router.push('/material/edit')
            }
        }
      }




</script>
<style  lang="less"  scoped>
       .list-box{
        display: block;
        height: 100%;
        overflow-x: hidden;
        padding: 16px  0 0 ;

        li{
           
            display: flex;
            position: relative;
            border-top: solid  1px  #ddd;
            border-bottom: solid  1px  #ddd;
            margin-bottom: 16px;
            padding: 8px 12px;
            span{
                flex: 1;
                height: 32px;
                font-size: .9rem;
                line-height: 32px;
                color: #fe5b02;
                em{
                    margin-left: 8px;
                    color: #999;
                    font-size: .7rem;
                    font-style: normal;
                }

            }

            i{
                flex: 0 0 36px;
                //字体图标样式
                font-family: "iconfont";
                font-size: 26px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                color: #fe5b02;
                text-align: center;
            }
        }
       }
</style>